<template>
    <div class="lodinbox">
        <back></back>
        <h2>注册账号</h2>
        <div class="dlbox">
            <div class="phonelogin">
                <div>
                    <!-- 昵称 -->
                    <input 
                    type="text" 
                    placeholder="请输入昵称" 
                    v-model="nc">

                    <!-- 手机号 -->
                    <div style="position: relative;">
                        <input 
                        type="text" 
                        placeholder="请输入手机号码" 
                        v-model="zh" >

                        <span 
                        :style="{'backgroundColor':sfzc==true?'red':'green',
                        display:sfzcxs==true?'block':'none'}" 
                        class="dc"> 
                            {{sfzc==true?'已':'可'}}
                        </span>
                    </div>

                    <!-- 验证码 -->
                    <div style="position: relative;">
                        <input 
                        type="text" 
                        :placeholder="isan==1?'请获取验证码':'请输入验证码'" 
                        v-model="cap" 
                        ref="inpu"
                        :readonly="isan==1">

                        <span 
                        :style="{'backgroundColor':yz==true?'red':'green',
                        display:yzxs==true?'block':'none'}" 
                        class="dc"> 
                            {{yz==true?'×':'√'}}
                        </span>
                    </div>

                    <!-- 密码 -->
                    <input 
                    type="password" 
                    placeholder='请输入密码' 
                    v-model="mm" >
                    
                    <!-- 密码确认 -->
                    <div style="position: relative;">
                        <input 
                        type="password" 
                        placeholder='再次输入密码'
                        v-model="mmagan" >

                        <span 
                        :style="{'backgroundColor':yes==true?'red':'green',
                        display:yesxs==true?'block':'none'}" 
                        class="dc"> 
                            {{yes==true?'×':'√'}}
                        </span>
                    </div>

                </div>
                <!-- 获取验证码 -->
                <div 
                class="getcap" 
                :style="{'height':getheight}"
                @click="yzm"
                >
                    {{yzmts}}
                </div>
            </div>
            <div class="btbox">
                <button class="denglu" @click="zhuce">注册</button>
                <button class="zhuce" @click="denglu">登录</button> 
            </div>        
        </div>
        <div class="leftyuan">泠</div>
        <div class="topyuan">泠</div>
        <!-- 注册中 -->
        <!-- <div class="dling" v-show="dling">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-loading"></use>
            </svg>
            <div>正在注册中……</div>
        </div> -->
        <!-- 网络不佳 -->
        <!-- <div class="wlbj" v-show="wlbj">
            网络好像出现了问题……
            <p><span @click="zhuce">重新注册</span></p>
        </div> -->
    </div>
</template>
<script>
import back from "../sosmall/reback.vue"
export default {
    name:'register',
    components:{
        back
    },
    created() {
        this.$nextTick(function () {
            let serachBox = this.$refs.inpu;
            this.getheight = serachBox.clientHeight-20+2.333+"px"
        })
    },
    data(){
        return{
            yz:false,
            yzxs:false,
            sfzc:false,
            sfzcxs:false,
            yesxs:false,
            yes:true,
            zh:'',
            mm:'',
            mmagan:'',
            nc:'',
            cap:'',
            getheight:0,
            isan:1,
            changnum:60,
            tim:null,
            yzmts:"获取验证码"
        }
    },
    watch:{
        'mmagan'(){
            this.yesxs = true
            if(this.mm === this.mmagan){
                this.yes = false
            }else{
                this.yes = true
            }
            if(this.mmagan === ''){
                this.yesxs = false
            }
        },
        'zh'(){
            if(this.zh.length === 11){
                axios.get(`https://apis.netstart.cn/music/cellphone/existence/check?phone=${this.zh}`,
                {
                    headers: {
                        'Content-Type':'application/json'
                    }
                }
                ).then(
                    res=>{
                        // console.log(res)
                        if(res.data.exist === -1){
                            this.sfzc=false
                            this.sfzcxs=true
                        }else{
                            this.sfzc=true
                            this.sfzcxs=true
                        }
                    },
                    err=>{
                        console.log(err)
                    }
                )
            }else{
                this.sfzcxs = false
            }
        },
        'cap'(){
            if(this.cap.length >= 6){
                // axios.get(`https://apis.netstart.cn/music/captcha/verify?phone=${this.zh}&captcha=${this.cap}`,
                // {
                //     headers: {
                //         'Content-Type':'application/json'
                //     }
                // }
                // ).then(
                //     res=>{
                //         console.log(res)

                //     },
                //     err=>{
                //         console.log(err)
                //     }
                // ) 
                this.yzxs = true               
                if(this.cap === '123456'){
                    this.yz = false
                }else{
                    this.yz = true
                }
            }else{
                this.yzxs = false
            }
        }
    },
    computed:{
    },
    beforeRouteEnter(to,from,next){
        let _token = localStorage.getItem('_token')
        // 判断
        if(_token !== null){
            next({path:'/center'});
        }
        else {
            next();
        }
    },
    methods:{
        denglu(){
            this.$router.push({path:'/login'})
        },
        zhuce(){
            if(this.sfzc === false && this.sfzcxs == true && this.yes == false &&this.yesxs == true && this.yz == false && this.yzxs == true && this.nc !== ''){
                console.log("开始注册")
                localStorage.setItem('_token',269187252)
                this.$router.push({path:'/center'})
                // axios.post(`https://apis.netstart.cn/music/register/cellphone?phone=${this.zh}&password=${this.mm}&captcha=${this.cap}&nickname=${this.nc}`,
                // {
                //     headers: {
                //         'Content-Type':'application/json'
                //     }
                // }
                // ).then(
                //     res=>{
                //         console.log(res)
                //         let id = res.data.id
                //         localStorage.setItem('_token',id)
                //         this.$router.push({path:'/center'})
                //     },
                //     err=>{
                //         console.log(err)
                //     }
                // )
            }else{
                console.log("无法注册")
            }
           
        },
        yzm(){
            if(this.sfzc === false && this.changnum == 60 && this.sfzcxs == true){
                // 发送验证码
                // axios.post(`https://apis.netstart.cn/music/captcha/sent?phone=${this.zh}`,
                // {
                //     headers: {
                //         'Content-Type':'application/json'
                //     }
                // }
                // ).then(
                //     res=>{
                //         console.log(res)
                //     },
                //     err=>{
                //         console.log(err)
                //     }
                // )
                // 标签改变
                this.isan += 1
                let that = this
                that.yzmts = '剩余60秒'
                this.tim = setInterval(()=>{
                    that.changnum -= 1
                    that.yzmts = '剩余'+that.changnum+'秒'
                    if(that.changnum <= 0){
                        clearInterval(that.tim)
                        that.tim = null
                        that.changnum = 60
                        that.yzmts = '获取验证码'
                    }
                },1000)
            }else{
                // console.log("请输入手机号")
            }
        },
    }
}
</script>
<style lang="less" scoped>
.dc{
    // position: relative;
    position: absolute;
    top: 50%;
    right: -17%;
    transform: translate(-50%, -100%);
    color: white;
    /* font-weight: bolder; */
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    // background-color: red;
    text-align: center;
    line-height: 1.3rem;
    border-radius: 50%;
}
.getcap{
    background-color: #e7e7e7;
    position: absolute;
    top: 20%;
    text-align: center;
    width: 27%;
    font-size: 0.5rem;
    right: 0%;
    padding: 10px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
.wjmm{
    z-index: 50;
}
.dling{
    position: absolute;
    top: 52%;
    left: 50%;
    color: rgb(163,163,163);
    letter-spacing:0.15rem;
    margin: 0px;
    display: flex;
    justify-content: center;
    z-index: 100;
    transform: translate(-50%,-50%);
    background-color: white;
    padding: 20px;
    width: 200px;
    border-radius: 10px;
    height: 80px;
    svg{
        font-size: 1.5rem;
        animation: donghua 2s linear infinite;
        transform-origin: center center;
        margin-top: 25px;
    }
    div{
        font-size: 1rem;
        line-height: 1.5rem;
        padding-left: 10px;
        background-color: white;
        line-height: 80px;
    }
}
.wlbj{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    color: #717070;
    height: 150px;
    line-height: 40px;
    text-align: center;
    padding: 25px;
    background-color: white;
    font-size: 1.1rem;
    p{
        display:flex;
        justify-content: space-between;
        margin-top: 30px;
        span{
            display:inline-block;    
            font-size: 0.9rem;
            width: 64px;
            padding: 5px;
            color:  #6b6bdab8;
            // border: 1px solid;
            border-radius: 10px;
            // background-color: yellow;
        }
    }
}
h2{
    margin-top: 110px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    text-shadow: 1px 1px 1px #bbb;
}
.lodinbox{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: rgba(120, 172, 241, 0.575);
}
.dlbox{
    z-index: 50;
    width: 60%;
    margin: 20px auto;
    position: relative;
    border-radius: 10px;
    padding: 40px;
    background-color: white;
    border: 1px solid #ccc;
    .ys{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        span{
            color:rgb(163,163,163);
            // display: inline-block;
        }
    }
    p{
        margin: 0px;
        position: absolute;
        bottom: 3%;
        right: 5%;
        font-size: 0.8rem;
        color: #555;
    }
}
.phonelogin{
    position: relative;
    input{
        width: 90%;
        outline: none;
        border: 1px solid #eee;
        // background-color: #eef;
        margin-bottom: 20px;
        border-radius: 50px;
        // margin-bottom: 10px;
        padding: 10px;
        background: #a3a3a30a;
        &::-webkit-input-placeholder{
            color:#a3a3a3;
        }
    }
    svg{
        position: absolute;
        bottom: 10%;
        right: 5%;
        font-size: 1.5rem;
    }
}
.leftyuan{
    position: absolute;
    /* top: 35%; */
    font-size: 15rem;
    top: -12%;
    left: -4%;
    border-radius: 50%;
    color: #ffffff59;
}
.topyuan{
    color: #ffffff29;
    font-size: 12rem;
    /* width: 25rem; */
    /* height: 25rem; */
    /* background-color: #2179ec88; */
    position: absolute;
    bottom: -6%;
    right: -3%;
    border-radius: 50%;
}
.dlactive{
    color: #5893e2 !important;
    position: relative;
    font-weight: 600;
    &::after{
        content:'';
        width: 100%;
        height: 2px;
        background-color: #5893e2;
        position: absolute;
        bottom: -50%;
        left: 0px;
    }
}
.btbox{
    display: flex;
    margin-top:10px;
    justify-content: space-around;
    width: 100%;
    button{
        border: 1px solid transparent;
        padding: 10px;
        width: 35%;
        color: white;
        font-size: 1.2rem;
        border-radius: 10px;
        font-weight: 600;
        background-color: #eee;
        &:first-child{
            background: #6b6bdab8;
            color: white;
        }
    }
}
.mmcw{
    background-color: #ff00001a !important;
    border: 1px solid red !important;
}
</style>
<style>
@keyframes donghua {
    form {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>